<template>
    <div>
        <div>
            <el-input v-model="filters.name" @input="loadData"
                      prefix-icon="search"
                      style="width: 33%"
                      :placeholder="$t('datasource.name')"></el-input>
            <el-button class="ml10" icon="search">{{$t('common.search')}}</el-button>
            <el-button @click="removeSelected" class="ml10" icon="delete">{{$t('button.remove')}}
            </el-button>
        </div>
        <el-table ref="table"
                  :data="list"
                  @selection-change="selectionChange"
                  row-key="id"
                  class="mt10">
            <el-table-column type="selection"></el-table-column>
            <el-table-column :label="$t('history.ds1')" width="250" prop="name">
                <template #default="{row}">
                    {{ row.ds1Name }}
                    <span class="color-secondary ml10">
                        {{
                        row.ds1Database
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('history.ds2')" width="250" prop="name">
                <template #default="{row}">
                    {{ row.ds2Name }}
                    <span
                            class="color-secondary ml10">
                        {{
                        row.ds2Database
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('history.compareTime')" width="180"
                             prop="compareTime">

            </el-table-column>
            <el-table-column :label="$t('history.isDiff')" width="80" prop="isDiff">
                <template #default="{row}">
                    <template v-if="row.isDiff">
                        <el-tag type="primary" effect="dark">{{$t('common.yes')}}</el-tag>
                    </template>
                    <template v-else>
                        <el-tag type="info">{{$t('common.no')}}</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column :label="$t('history.diffCount')" width="80"
                             prop="diffCount">
                <template #default="{row}">
                    <template v-if="row.diffCount===0">
                        -
                    </template>
                    <template v-else>
                        {{ row.diffCount }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column :label="$t('history.summary')" prop="summary">
                <template #default="{row}">
                    {{ row.diffSummary }}
                </template>
            </el-table-column>

            <el-table-column :label="$t('history.option')" width="80">
                <template #default="{row}">
                    <div class="flex-space-between">
                        <el-button size="small" @click="remove(row)" :underline="false">
                            {{ $t('button.remove')}}
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="pageChange"
                       :total="pageInfo.total"
                       :page-size="pageInfo.pageSize"
                       class="mt10 fr"></el-pagination>
    </div>

</template>


<script>
import {defineComponent} from 'vue'
import SvgIcon from "@/components/SvgIcon/index.vue";
import api from "@/api/api.js";

export default defineComponent({
  name: "compare-his",
  components: {SvgIcon},
  data() {
    return {
      list: [],
      pageInfo: {
        pageSize: 10,
        pageNum: 1
      },
      filters: {
        name: null
      },
      selection: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loadData()
    },
    loadData() {
      api.histories({
        ...this.pageInfo,
        ...this.filters
      }).then(res => {
        const data = res.data.data
        this.list = data.list
        this.pageInfo.total = data.total

      })
    },
    pageChange(pageNum) {
      this.pageInfo.pageNum = pageNum
      this.loadData()
    },
    remove(row) {
      api.deleteHistory({ids: [row.id]}).then(res => {
        const data = res.data
        if (data.code === 0) {
          this.$message.success('删除成功')
          this.loadData()
        }
      })
    },
    selectionChange(selection) {
      this.selection = selection
    },
    removeSelected() {
      if (!this.selection || this.selection.length === 0) {
        return
      }
      api.deleteHistory({ids: this.selection.map(v => v.id)}).then(res => {
        const data = res.data
        if (data.code === 0) {
          this.$message.success('删除成功')
          this.loadData()
        }
      })
    }
  }
})
</script>

<style scoped>

</style>